<template>
    <ModalCom v-bind="$attrs" width="1000px" @open="modalOpen" :inner-loading="innerLoading" :ok-async="okAsync">
      <Item ref="itemRef" v-for="item in datalist" :key="item.id" :list="item" />
    </ModalCom>
</template>

<script setup>
import { reactive, ref } from "vue"
import Item from "./item.vue"
// 跨级组件
import ModalCom from "@/components/modal/index.vue"
// message
import { message } from "ant-design-vue"
// api
import { getPermissions, setPermissions } from "@/api/role"
// tree
import { formatTree } from "@/utils"
// props
const props = defineProps({
  row: {
    type: Object,
    default: () => ({})
  }
})
// itemRef
const itemRef = ref(null)
const datalist = ref([])

const okAsync = () => {
  return new Promise((resolve, reject) => { // then，catch
    let ids = []
    let menu_id = []
    // 循环按钮
    itemRef.value.forEach(elem => {
      const changeIds = elem?.getChecked();
      ids = [...ids, ...changeIds.ids]
      changeIds.menu_id && menu_id.push(changeIds.menu_id)
    });
    
    console.log('ids', ids)
    console.log('menu_id', menu_id)
    // 设置权限 
    setPermissions({
      ids: ids.join(),
      menu_id: menu_id.join(),
      id: props.row.role_id
    }).then(res => {
      message.success(res?.msg)
      resolve()
    }).catch(() => {
      reject()
    })
  })
}

const innerLoading = () => {
  return new Promise((resolve, reject) => { // then，catch
    getPermissions({id: props.row.role_id}).then(res => {
      // 格式化后的数组
      // const data = formatTree(res.content?.data, 'id', 'parent_id')
      datalist.value = res.content
      resolve()
    }).catch(() => {
      reject()
    })
  })
}
const modalOpen = () => {
    console.log('打开了')
}
</script>